<script setup>
	import { ref } from "vue"
	import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app"
	import { getBannerAPI, getRecommendAPI, getNoticeAPI, getClassifyAPI } from "@/api/index.js"

	// 轮播图
	const bannerList = ref([])
	const getBannerList = async () => {
		const { data } = await getBannerAPI()
		bannerList.value = data
	}
	// 公告
	const noticeList = ref([])
	const getNoticeList = async () => {
		const { data } = await getNoticeAPI({ select: true })
		noticeList.value = data
	}
	// 推荐
	const recommendList = ref([])
	const getRecommendList = async () => {
		const { data } = await getRecommendAPI()
		recommendList.value = data
	}
	// 精选
	const classifyList = ref([])
	const getClassifyList = async () => {
		const { data } = await getClassifyAPI({ select: true })
		classifyList.value = data
	}

	// 查看图片详情
	const onPreview = (id) => {
		uni.setStorageSync("classifyList", recommendList.value)
		uni.navigateTo({ url: `/pages/preview/preview?id=${id}` })
	}
	getBannerList()
	getNoticeList()
	getRecommendList()
	getClassifyList()

	// 分享好友
	onShareAppMessage((e) => {
		return { title: "拾光壁纸", path: "/pages/index/index" }
	})
	// 分享朋友圈
	onShareTimeline(() => {
		return { title: "拾光壁纸" }
	})
</script>

<template>
	<view class="home-container page-bg">
		<!-- 自定义头部 -->
		<custom-nav-bar title="推荐"></custom-nav-bar>
		<!-- 轮播 -->
		<div class="banner">
			<swiper autoplay circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
				<swiper-item v-for="item in bannerList" :key="item._id">
					<!-- 跳转其他小程序 -->
					<navigator class="banner-img" v-if="item.target==='miniProgram'" target="miniProgram" :url="item.url"
						:app-id="item.appid">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>
					<!-- 跳转当前页面 -->
					<navigator class="banner-img" v-else :url="`/pages/classify-list/classify-list?${item.url}`">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</div>
		<!-- 公告 -->
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay circular interval="1500" duration="300">
					<swiper-item v-for="item in noticeList" :key="item._id">
						<navigator class="notice-title" :url="`/pages/notice/detail?name=公告详情&id=${item._id}`">{{item.title}}
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
		<!-- 每日推荐 -->
		<view class="select">
			<common-title title="每日推荐">
				<template #right>
					<uni-icons type="calendar" size="18"></uni-icons>
					<uni-dateformat class="current-day" :date="new Date()" format="dd日"></uni-dateformat>
				</template>
			</common-title>
			<div class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="item in recommendList" :key="item._id" @click="onPreview(item._id)">
						<image :src="item.smallPicurl" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</div>
		</view>
		<!-- 专题精选 -->
		<view class="theme">
			<common-title title="专题精选">
				<template #right>
					<navigator class="more" url="/pages/classify/classify" open-type="reLaunch">More+</navigator>
				</template>
			</common-title>
			<div class="content">
				<theme-item v-for="item in classifyList" :key="item._id" :item="item"></theme-item>
				<theme-item isMore></theme-item>
			</div>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.home-container {
		padding-bottom: 20rpx;
	}

	.banner {
		width: 750rpx;
		margin: 30rpx 0;

		swiper {
			width: 750rpx;
			height: 340rpx;

			&-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;

				.banner-img {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

			}
		}
	}

	.notice {
		width: 690rpx;
		height: 80rpx;
		margin: 0 auto;
		background-color: #f9f9f9;
		border-radius: 40rpx;
		display: flex;
		align-items: center;

		.left {
			width: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			:deep(.uni-icons) {
				color: $primary-color !important;
			}


			.text {
				color: $primary-color;
				font-weight: 600;
				font-size: 28rpx;
			}
		}

		.center {
			flex: 1;

			swiper {
				height: 80rpx;
				line-height: 80rpx;

				&-item {
					color: #666;
					font-size: 30rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.notice-title {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}

		.right {
			width: 70rpx;
		}
	}

	.select {
		margin-top: 50rpx;

		:deep(.uni-icons) {
			color: $primary-color !important;
		}

		.current-day {
			color: $primary-color;
			margin-left: 5rpx;
		}

		.content {
			width: 720rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;

			scroll-view {
				white-space: nowrap;

				.box {
					width: 200rpx;
					height: 430rpx;
					margin-right: 15rpx;
					display: inline-block;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}

					&:last-child {
						margin-right: 30rpx;
					}
				}
			}
		}
	}

	.theme {
		margin-top: 50rpx;

		.more {
			font-size: 32rpx;
			color: #888;
		}

		.content {
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3, 1fr);
		}
	}
</style>